<template>
    <div class="wrapper">
        <el-row :gutter="50" class="page-row">
            <el-col class="col-bar left-bar" :span="10" :offset="2">
                <div class="person-content">
                    <el-form :model="userInfoForm" label-width="90px" :rules="rules" ref="ruleForm">
                        <!--  用户头像上传  -->
                        <el-form-item prop="avatar" label-width="0" style="margin: 20px auto; text-align: center">
                            <el-upload
                                    class="avatar-uploader"
                                    action="http://localhost:18080/avatar/upload"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="user.avatar" :src="user.avatar" class="avatar" alt="">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item prop="userName" label="用户名" style="margin: 20px 8px">
                            <el-input size="small" disabled v-model="userInfoForm.userName" prefix-icon="el-icon-user-solid" placeholder="请输入用户名">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="nickName" label="昵称" style="margin: 20px 8px">
                            <el-input size="small" v-model="userInfoForm.nickName" prefix-icon="el-icon-lock" placeholder="请输入昵称">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="email" label="邮箱" style="margin: 20px 8px">
                            <el-input size="small" v-model="userInfoForm.email" prefix-icon="el-icon-lock" placeholder="请输入邮箱">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="phone" label="电话" style="margin: 20px 8px">
                            <el-input size="small" v-model="userInfoForm.phone" prefix-icon="el-icon-lock" placeholder="请输入电话">
                            </el-input>
                        </el-form-item>
                        <el-form-item style="margin: 20px 8px; text-align: left">
                            <el-row :gutter="15">
                             <el-col :span="12">
                                 <el-tooltip class="item" effect="light" content="初始密码为000000，请及时修改" placement="left">
                                    <el-link style="color: #cccc00; margin-left: 20px" type="success" :underline="false" @click="resetPassword">
                                        重设密码
                                    </el-link>
                                 </el-tooltip>
                             </el-col>
                             <el-col :span="12">
                                 <el-button type="success" size="medium" style="width: 105px;" autocomplete="off" @click="saveInfo">保存信息</el-button>
                             </el-col>
                            </el-row>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col class="col-bar right-bar" :span="10">
                <div class="grid-content">
                    <div class="my-options">
                        <div class="detail-info-item">
                            <i class="el-icon-chat-line-square"></i><span class="my-blogs" @click="viewMyBlog(user.userName)">我的博客</span>
                        </div>
                        <div class="detail-info-item">
                            <i class="el-icon-notebook-1"></i><span class="my-articles" @click="viewMyFiles(user.userName)">我的文件</span>
                        </div>
                    </div>
                    <div class="dragon-container">
                        <img src="../assets/dragonlady.jpg" class="dragon-image" title="看什么看，尼美舒利" alt="">
                    </div>
                </div>
            </el-col>
        </el-row>

        <!-- 密码修改区  -->
        <el-dialog title="密码重置" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="resetForm" label-width="100px" ref="resetPassword" :rules="passwordRules" >
                <el-form-item label="旧密码" prop="password">
                    <el-input v-model="resetForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="resetForm.newPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="confirmPassword">
                    <el-input v-model="resetForm.confirmPassword" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitReset">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Person",
        data () {
            return {
                user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {},
                userInfoForm: {},
                rules: {
                    nickName: [
                        { required: true, message: '请输入昵称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { min: 5, max: 55, message: '长度在 5 到 55 个字符', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入电话', trigger: 'blur' }
                    ]
                },
                // 用户头像URL
                imageUrl: '',
                // 密码重置
                dialogFormVisible: false,
                resetForm: {},
                passwordRules: {
                    password: [
                        { required: true, message: '请输入原密码', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    confirmPassword: [
                        { required: true, message: '请确认新密码', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    newPassword: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        created () {
            this.userInfoForm = this.user
            this.imageUrl = this.user.avatar
        },
        methods: {
            saveInfo () {
                this.request.post('/user', this.userInfoForm).then(res => {
                    if (res.code === '200') {
                        this.$emit('avatarChange')
                        this.request.get('/user/' + this.user.id).then(res => {
                            res.data.token = JSON.parse(localStorage.getItem('user')).token
                            localStorage.setItem('user', JSON.stringify(res.data))
                        })
                        this.$message.success('个人信息保存成功!')
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            // 头像上传
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg'
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!')
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!')
                }
                return isJPG && isLt2M
            },
            handleAvatarSuccess (res) {
                this.userInfoForm.avatar = res.data
            },
            // 密码修改
            resetPassword () {
                this.resetForm = {}
                this.resetForm.id = this.user.id
                this.dialogFormVisible = true
            },
            submitReset () {
                this.$refs['resetPassword'].validate((valid) => {
                    if (valid) {
                        if (this.resetForm.newPassword !== this.resetForm.confirmPassword) {
                            this.$message.error('两次密码输入不一致!')
                        }
                        this.request.post('/user/reset-password', this.resetForm).then(res => {
                            if (res.code === '200') {
                                this.$message.success('密码重设成功!')
                                this.dialogFormVisible = false
                                this.$store.commit('logout')
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    } else {
                        return false
                    }
                })
            },
            // 我的发布
            viewMyBlog (userName) {
                this.$router.push({ path: '/my-articles',
                                    query: { uploader: userName }
                                  })
            },
            viewMyFiles (userName) {
                this.$router.push({ path: '/my-files',
                                    query: { uploader: userName }
                                  })
            }
        }
    }
</script>

<style scoped>
    div.wrapper {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .page-row,.col-bar {
        height: 100%;
    }
    .left-bar,.right-bar {
        display: flex;
        align-items: center;
    }
    div.person-content {
        width: 100%;
        height: 85%;
        border: 1px solid #cccccc;
        border-radius: 5px;
        box-shadow: 1px 0 6px rgb(0 21 41 / 35%);
    }
    div.grid-content {
        width: 100%;
        height: 85%;
    }
    div.my-options {
        width: 100%;
        height: 45%;
        border: 1px solid #cccccc;
        border-radius: 5px;
        box-shadow: 1px 0 6px rgb(0 21 41 / 35%);
    }
    div.dragon-container {
        width: 100%;
        height: 45%;
        text-align: center;
        margin-top: 10%;
    }
    img.dragon-image {
        height: 100%;
    }
    /* 头像框样式 */
    .avatar-uploader .avatar-uploader-icon {
        /*margin: 0 auto;*/
        border: 1px dashed #999999;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .avatar-uploader-icon:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    /* 我的发布内容 */
    .detail-info-item {
        text-align: center;
        font-size: 30px;
        height: 50%;
        line-height: 110px;
    }
    .my-blogs,.my-articles {
        margin-left: 20px;
        font-weight: 700;
        cursor: pointer;
    }
    .my-blogs {
        color: #67C23A;
    }
    .my-articles {
        color: #E6A23C;
    }
</style>